<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue' // 引入icon
const props = defineProps(['form', 'label', 'prop', 'required']);

const onUploadSuccess = (res: any) => { // 上传文件成功
  const url = 'http://localhost:5188' + res.result.url; // 上传的图片地址
  props.form.image = url; // 如果上传了之后， form.head不为空，就不会再报错
}
const rules = [];
if (props.required !== undefined) {
  rules.push({ required: true, message: "请上传" + props.label });
}
</script>

<template>
  <el-form-item :label="label" :prop="prop" :rules="rules">
    <!-- action 上传文件的地址 -->
    <!-- show-file-list 不显示文件列表 -->
    <el-upload class="upload" action="http://localhost:5188/upload" :show-file-list="false" :on-success="onUploadSuccess" accept=".png,.jpg">
      <img v-if="form[prop]" :src="form[prop]" class="head" />
      <el-icon v-else class="upload-icon">
        <Plus />
      </el-icon>
    </el-upload>
  </el-form-item>
</template>

<style scoped>
.upload {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #d3d3d3;
}
.upload-icon {
  width: 80px;
  height: 80px;
  font-size: 40px;
}
.head {
  width: 100px;
  height: 100px;
}
</style>